<template>
  <a-modal
    class="formModal"
    :title="$t('form.updatePassword.title')"
    v-model:open="modalVisible"
    @cancel="close"
    :footer="null"
  >
    <a-form ref="formRef" :model="formState">
      <a-form-item
        :label="$t('form.updatePassword.form.item_1.label')"
        name="password"
        :rules="[{ validator: checkPwd, trigger: 'blur' }]"
      >
        <a-input-password
          :maxlength="30"
          v-model:value.trim="formState.password"
          :placeholder="$t('form.updatePassword.form.item_1.rules.error_1')"
          allowClear
        ></a-input-password>
      </a-form-item>
      <a-form-item
        :label="$t('form.updatePassword.form.item_2.label')"
        name="repassword"
        :rules="[{ validator: checkRePwd, trigger: 'blur' }]"
      >
        <a-input-password
          :maxlength="30"
          v-model:value.trim="formState.repassword"
          :placeholder="$t('form.updatePassword.form.item_2.rules.error_1')"
          allowClear
        ></a-input-password>
      </a-form-item>
    </a-form>
    <div class="footer-btns">
      <a-button @click="close">{{ $t("btnText.cancel") }}</a-button>
      <a-button type="primary" :loading="isSubmitting" @click="submit">{{
        $t("btnText.ensure")
      }}</a-button>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from "vue";
import { postUpdatePassword } from "../../../api/member";
import { RegPassword } from "../../../data/reg";
import type { UpdatePasswordParams } from "../../../types/member";
import { message } from "ant-design-vue";
import { useMemberStore } from "../../../store";
import { useRouter } from "vue-router";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const memberStore = useMemberStore();
const router = useRouter();

const modalVisible = ref(false);
const close = () => {
  modalVisible.value = false;
  formRef.value.resetFields();
};
const show = () => {
  modalVisible.value = true;
};

defineExpose({
  close,
  show,
});

// ===============form state================
const formRef = ref();

const formState = ref<UpdatePasswordParams>({
  password: "",
  repassword: "",
});
const checkPwd = (_Rule: any, value: string) => {
  if (!value) {
    return Promise.reject($t("form.updatePassword.form.item_1.rules.error_1"));
  }
  if (!RegPassword.test(value)) {
    return Promise.reject($t("reg_rules.password"));
  }
  return Promise.resolve();
};

const checkRePwd = (_Rule: any, value: string) => {
  if (!value) {
    return Promise.reject($t("form.updatePassword.form.item_2.rules.error_1"));
  }
  if (!RegPassword.test(value)) {
    return Promise.reject($t("reg_rules.password"));
  } else {
    return Promise.resolve();
  }
};

const isSubmitting = ref(false);
const submit = () => {
  formRef.value.validate().then(async () => {
    isSubmitting.value = true;
    let res = await postUpdatePassword(formState.value);
    isSubmitting.value = false;
    if (res.code === 200) {
      message.success($t("message.password_changed"));
      memberStore.clearProfile();
      router.push("/login");
    } else {
      message.error($t("message.error.update"));
    }
  });
};
</script>
<style scoped lang="less"></style>
